<template>
	<div id="nav">
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link> |
		<router-link :to="{ name: 'user', params: { id: count } }">
			User
		</router-link>
	</div>

	{{ count }}
	<button @click="add">count++</button>

	<!-- <router-view /> -->
	<router-view v-slot="{ Component, route }">
		<!-- 使用任何自定义过渡和回退到 `fade` -->
		<transition :name="route.meta.transition || 'fade'">
			<component :is="Component" />
		</transition>
	</router-view>

	<!-- <router-view name="sidebar" /> -->
</template>

<script>
	export default {
		data() {
			return {
				count: 0,
			};
		},
		methods: {
			add() {
				this.count++;
				console.log("this.count=", this.count);
			},
		},
	};
</script>

<style lang="scss">
.fade-enter-active,.fade-leave-active{
  transition:opacity .5s linear
}
.fade-enter-from,.fade-leave-to{
  opacity:0
}

.slide-left-enter-active,
.slide-left-leave-active{
  transition:all .5s linear
}
.slide-left-enter-from,
.slide-left-leave-to{
  transform: translateX(200px);
  opacity: 0;
}

// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }

// #nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }
</style>
